<!--
   Copyright 2024 The Google Research Authors.
  
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<!DOCTYPE html>
<html>
<head>
<title>Click Checkboxes Multi Layouts Task</title>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="../core/core.css">
<link rel="stylesheet" href="../core/jquery-ui/jquery-ui.min.css">
<style>
  input { width: 20px; }
  #subbtn { margin: 0 7px; }
  /* 160 + 160 + 50 + 30 */
  #wrap,
  #sync-task-cover {
    height: 400px;
    width: 160px;
  }

  #click-canvas,
  #reward-display {
    left: 165px;
  }

  #query {
    background-color: #FF0;
    font-size: 10px;
    height: 74px;
    padding: 3px;
  }
</style>

<!-- JS -->
<script src="../core/core.js"></script>
<script src="../core/d3.v3.min.js"></script>
<script src="../common/ui_utils.js"></script>
<script src="../core/jquery-ui/external/jquery/jquery.js"></script>
<script src="../core/jquery-ui/jquery-ui.min.js"></script>

<script>
core.EPISODE_MAX_TIME = 2000000;  // set episode interval to 2000 seconds

// multi-layouts
var GENRES = ['Action', 'Adventure', 'Comedy', 'Crime', 'Drama', 'Fantasy', 'Historical', 'Horror', 'Mystery', 'Paranoid', 'Political', 'Romance', 'Saga', 'Satire', 'Surreal', 'Thriller', 'Urban', 'Western'];

var layout1 = function (checker) {
  var genreBox = $('<input type=text>');
  var nameBox = $('<input type=text>');
  var yearBox = $('<input type=text>');
  var rows = [
    $('<p>').append('<span>Genre:</span>').append(genreBox),
    $('<p>').append('<span>Director:</span>').append(nameBox),
    $('<p>').append('<span>Year:</span>').append(yearBox),
    ];
  core.shuffle(rows);
  rows.forEach(function (row) { row.appendTo('#area'); });
  var submit = $('<button type=button>').text('Submit').appendTo('#area')
    .click(function () {
      checker(genreBox.val(), nameBox.val(), yearBox.val());
    });
  $('#area').append(layout1Style);
}

var layout1Style = `<style>
#area span { width: 50px; display: inline-block; margin-left: 10px;}
#area input[type=text] { width: 80px; }
</style>`;

var layout2 = function (checker) {
  var genreBox = $('<input type=text>');
  var nameBox = $('<input type=text>');
  var yearBox = $('<input type=text>');
  var rows = [
    $('<div class=row>').append('<div>Genre</div>').append(genreBox),
    $('<div class=row>').append('<div>Director Name</div>').append(nameBox),
    $('<div class=row>').append('<div>Year</div>').append(yearBox),
    ];
  core.shuffle(rows);
  rows.forEach(function (row) { row.appendTo('#area'); });
  var submit = $('<button type=button>').text('Search')
    .appendTo($('<div class=submit-row>').appendTo('#area'))
    .click(function () {
      checker(genreBox.val(), nameBox.val(), yearBox.val());
    });
  $('#area').append(layout2Style);
}

var layout2Style = `<style>
#area div.row { margin: 5px; }
#area div.row div { font-weight: bold; }
#area div.row input[type=text] { width: 140px; }
#area div.submit-row { text-align: center; }
</style>`;

var layout3 = function (checker) {
  var genreBox = $('<input type=text>');
  var nameBox = $('<input type=text>');
  var yearBox = $('<input type=text>');
  var rows = [
    $('<tr>').append('<th>Genre</th>').append($('<td>').append(genreBox)),
    $('<tr>').append('<th>Director</th>').append($('<td>').append(nameBox)),
    $('<tr>').append('<th>Year</th>').append($('<td>').append(yearBox)),
    ];
  core.shuffle(rows);
  $('<div class=title-div>Movie Search</div>').appendTo('#area');
  var table = $('<table>').appendTo('#area');
  rows.forEach(function (row) { row.appendTo(table); });
  var submit = $('<div class=final>').text('Submit').appendTo('#area')
    .click(function () {
      checker(genreBox.val(), nameBox.val(), yearBox.val());
    });
  $('#area').append(layout3Style);
}

var layout3Style = `<style>
#area div.title-div { text-align: center; font-weight: bold; margin-top: 10px; font-size: 120%; }
#area table { margin: 5px auto; }
#area th { text-align: right; }
#area input[type=text] { width: 90px; }
#area .final { padding: 2px; border: 1px solid gray; margin: 2px auto; width: 50px; text-align: center; background: #fed; cursor: pointer; }
#area .final:hover { background: #fcc; }
</style>`;

var layout4 = function (checker) {
  var genreBox = $('<input type=text>');
  var nameBox = $('<input type=text>');
  var yearBox = $('<input type=text>');
  var rows = [
    $('<div class=field>').append('<div class=label>Movie Genre</div>').append($('<div class=input>').append(genreBox)),
    $('<div class=field>').append('<div class=label>Director Name</div>').append($('<div class=input>').append(nameBox)),
    $('<div class=field>').append('<div class=label>Released Date</div>').append($('<div class=input>').append(yearBox)),
    ];
  core.shuffle(rows);
  rows.forEach(function (row) { row.appendTo('#area'); });
  var submit = $('<button type=button>').text('Go!')
    .appendTo($('<div class=submit-row>').appendTo('#area'))
    .click(function () {
      checker(genreBox.val(), nameBox.val(), yearBox.val());
    });
  $('#area').append(layout4Style);
}

var layout4Style = `<style>
#area div.field { background-color: #DDD; margin: 2px; padding: 3px 8px; border-radius: 3px;}
#area input[type=text] { width: 98%; }
#area .submit-row { text-align: center; }
</style>`;

var layout5 = function (checker) {
  var genreBox = $('<input type=text>');
  var nameBox = $('<input type=text>');
  var yearBox = $('<input type=text>');
  var rows = [
    $('<div class=ui-entry>').append(genreBox).append('<div class=ui-label>Genre</div>'),
    $('<div class=ui-entry>').append(nameBox).append('<div class=ui-label>Director</div>'),
    $('<div class=ui-entry>').append(yearBox).append('<div class=ui-label>Year</div>'),
    ];
  core.shuffle(rows);
  var wrapper = $('<div class=ui-entry-wrap>').appendTo('#area');
  rows.forEach(function (row) { row.appendTo(wrapper); });
  var submitRow = $('<div class=ui-footer>').appendTo('#area');
  var submit = $('<div class=ui-submit>').text('Search').appendTo(submitRow)
    .click(function () {
      checker(genreBox.val(), nameBox.val(), yearBox.val());
    });
  $('#area').append(layout5Style);
}

var layout5Style = `<style>
#area .ui-entry-wrap { width: 140px; margin: 3px auto; padding: 2px 5px; background-color: #333; border-radius: 5px;}
#area .ui-entry { margin: 8px auto; }
#area .ui-entry input[type=text] { padding: 0; margin: 0; width: 95%; }
#area .ui-label { font-weight: bold; color: white; }
#area .ui-footer { margin: 0 auto; text-align: center; }
#area .ui-submit { display: inline-block; border: 1px solid gray; background-color: #BBB; border-radius: 3px; padding: 3px; width: 50px; text-align: center; box-shadow: inset 0px 1px 0px 0px #EEE; cursor: pointer; }
#area .ui-submit:active { box-shadow: inset 0px 1px 0px 0px #999; }
</style>`;

var layouts = [layout1, layout2, layout3, layout4, layout5];

// click-checkboxes-soft
var SYNONYMS = [
  ['big', 'large', 'huge', 'enormous', 'gigantic'],
  ['small', 'tiny', 'little', 'mini', 'petite'],
  ['red', 'scarlet', 'crimson', 'vermillion'],
  ['happy', 'cheerful', 'joyful', 'gleeful', 'delighted'],
  ['sad', 'unhappy', 'sorrowful', 'miserable', 'tragic'],
  ['angry', 'mad', 'furious', 'irritated'],
  ['evil', 'wicked', 'immoral', 'sinful', 'corrupt', 'depraved'],
  ['wrong', 'incorrect', 'mistaken', 'erroneous'],
  ['real', 'genuine', 'actual'],
  ['strange', 'odd', 'peculiar', 'unusual', 'weird'],
  ['stop', 'cease', 'halt', 'end', 'finish'],
  ['scared', 'terrified', 'panicked', 'fearful', 'frightened', 'afraid'],
  ['quiet', 'calm', 'peaceful', 'serene', 'mild'],
  ['old', 'aged', 'archaic'],
  ['love', 'like', 'adore', 'favor'],
  ['kill', 'murder', 'assassinate'],
  ['keep', 'retain', 'preserve', 'sustain', 'maintain'],
  ['hide', 'conceal', 'camouflage'],
  ['hate', 'despise', 'loathe', 'detest', 'dislike'],
  ['funny', 'humorous', 'amusing', 'comical', 'laughable'],
  ['fat', 'fleshy', 'plump', 'chubby'],
  ['stupid', 'dumb', 'dull', 'unwise'],
  ['delicious', 'savory', 'delectable', 'appetizing'],
  ['cut', 'slice', 'carve', 'chop'],
  ['brave', 'courageous', 'fearless'],
  ['begin', 'start', 'initiate', 'launch'],
  ['answer', 'reply', 'response'],
  ['television', 'televisions', 'TV', 'TVs'],
  ['house', 'home', 'houses', 'homes'],
  ['fire', 'flame', 'fires', 'flames'],
  ['pig', 'pork', 'swine', 'pig'],
  ['rabbit', 'rabbits', 'bunny', 'bunnies'],
  ['car', 'cars', 'automobile', 'automobiles', 'vehicle', 'vehicles'],
  ['water'],
];

var createCheckboxes = function(div){
  var checkboxData = { toclick: {}, clickNames: [], answers: []};

  checkboxData.elems = core.randi(2, 7);
  var wordList = SYNONYMS.slice();
  core.shuffle(wordList);
  checkboxData.numToClick = core.randi(1, 6);
  checkboxData.elems = core.randi(Math.max(3, checkboxData.numToClick + 1), 7);
  checkboxData.names = [];
  for(var i=0;i<checkboxData.elems;i++) {
    var chname = core.sample(wordList[i]);
    var label = div.append('label')
    label.append('input').attr('type', 'checkbox').attr('id', 'ch'+i);
    label[0][0].innerHTML += core.sample(wordList[i]);
    div.append('br');
    checkboxData.names.push([i, chname]);
  }
  core.shuffle(checkboxData.names);
  for(var j=0;j<checkboxData.elems;j++) {
    if (j < checkboxData.numToClick) {
      checkboxData.toclick[checkboxData.names[j][0]] = true;
      checkboxData.clickNames.push(checkboxData.names[j][1]);
      checkboxData.answers.push(checkboxData.names[j][0]);
    } else {
      checkboxData.toclick[checkboxData.names[j][0]] = false;
    }
  }  

  return checkboxData;
}

var genProblem = function() {
  var task_state = -1.0;
  // click-checkboxes-soft
  var div = d3.select('#area');
  $('#area').empty();
  var boxesDiv = $('#boxes');
  if (boxesDiv.length == 0){
    div.append('div').attr('id', 'boxes');
    div.append('br');
    // div.append('button').attr('id', 'subbtn').attr('class', 'secondary-action').html('Submit');
  }
  var div = d3.select('#boxes');

  var checkboxData = createCheckboxes(div);

  var qstr = checkboxData.clickNames.join(', ');
  var ans = checkboxData.answers.join(', ');
  if(qstr.length === 0) { qstr = 'nothing'; }
  if(ans.length === 0) { ans = 'nothing'; }
  console.log('click-checkboxes-soft', ans)

  // multi-layouts
  var eGenre = core.sample(GENRES).toLowerCase();
  var eName = core.sample(ui_utils.LAST_NAMES);
  var eYear = core.randi(1970, 2018);
  
  d3.select('#query').html('Select words similar to ' + qstr + ', and then search for <b>' + eGenre + '</b> movies directed by <b>' + eName + '</b> from year <b>' + eYear + '</b>.');
  // d3.select('#query').html('Search for <b>' + eGenre + '</b> movies directed by <b>' + eName + '</b> from year <b>' + eYear + '</b>, after selecting words similar to ' + qstr + '.');

  var checker = function (cGenre, cName, cYear) {
    // click-checkboxes-soft
    var r = 0;
    for(var i=0;i<checkboxData.elems;i++) {
      var is_checked = d3.select('#ch'+i)[0][0].checked;
      r += is_checked === checkboxData.toclick[i] ? 1.0 : -1.0;
    }
    task_state = r == checkboxData.elems ? 1.0 : -1.0
    console.log('click-checkboxes-soft', task_state)
    // multi-layouts
    if (cGenre.toLowerCase().trim() == eGenre &&
        cName.toLowerCase().trim() == eName.toLowerCase() &&
        ('' + cYear) == ('' + eYear) && task_state == 1.0) {
      console.log('multi-layouts', 1.0);
      core.endEpisode(1.0, true);
    } else {
        console.log('multi-layouts', -1.0);
      core.endEpisode(-1.0);
    }
  };

  var layout = core.sample(layouts);
  layout(checker);
}

window.onload = function() {
  core.startEpisode();
}
</script>
</head>
<!-- Base HTML -->
<body>
<div id="wrap">
  <div id="query"></div>
  <div id="area">
    <div id="boxes"></div>
    <br>
  </div>
</div>
</body>
</html>
